<!-- 歌单详情 -->
<template>
	<view class="content">
		<view class="top">
			<view class="top-icon">
				<image src="../../static/SongSheetInfo/搜索.png"></image>
				<image src="../../static/SongSheetInfo/更多.png"></image>
			</view>
			<view class="top-body">
				<image :src="RecommendSongSheetInfo.coverImgUrl"></image>
				<view class="top-right">
					<text>{{RecommendSongSheetInfo.name}}</text>
					<view>
						<image :src="RecommendSongSheetInfo.creator.avatarUrl"></image>
						<text>{{RecommendSongSheetInfo.creator.nickname}}</text>
					</view>
					<text>{{RecommendSongSheetInfo.description}}</text>
				</view>
			</view>
		</view>
		<view class="centre">
			<view class="centre-item">
				<image src="../../static/SongSheetInfo/G_tianjia.png"></image>
				<text>{{subscribedCount}}</text>
			</view>
			<view class="centre-item">
				<image src="../../static/SongSheetInfo/评论.png"></image>
				<text>{{commentCount}}</text>
			</view>
			<view class="centre-item">
				<image src="../../static/SongSheetInfo/分享.png"></image>
				<text>{{shareCount}}</text>
			</view>
		</view>
		<view class="body">
			<view class="body-top" :class="{ 'body-fixed':items_top<=44 }">
				<image src="../../static/SongSheetInfo/视频.png"></image>
				<text id="big-text">播放全部</text>
				<text id="small-text">（{{RecommendSongSheetInfo.trackCount}}）</text>
			</view>
			<view class="body-items" id="items">
				<view class="body-item" v-for="(item,index) in song_list" :key="item.id">
					<text>{{index + 1}}</text>
					<SongItem style="width: 100%;" :name="item.name" :artists="item.ar[0].name" :album="item.al.name"
						:index="index" :data="RecommendSongSheetList">
					</SongItem>
				</view>
				<text @click="toLogin" v-if="!UserInfo.userId">查看更多内容，请登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				items_top: 230, // 歌曲的高度
				song_list: [], // 当前显示的音乐列表
			}
		},
		methods: {
			...mapActions('SongSheetInfo', ['getRecommendSongSheetInfo', 'GetRecommendSongSheetAllInfo']),
			...mapMutations('SongSheetInfo', ['setRecommendSongSheetInfo', 'setRecommendSongSheetList']),
			...mapMutations('song', ['setSongList']),

			// 跳转到登录页面
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			// 跳转到歌曲详情页面
			tosong(index) {
				let RecommendSongSheetList = []
				for (var i = 0; i < this.RecommendSongSheetList.length; i++) {
					let item = this.RecommendSongSheetList[i]
					RecommendSongSheetList.push({
						id: item.id,
					})
				}
				uni.navigateTo({
					url: `/pages/song/song?index=${index}`,
					success: () => {
						this.setSongList(RecommendSongSheetList)
					}
				})
			}
		},
		// 页面加载
		onLoad: function(option) {
			this.getRecommendSongSheetInfo(option.id)
			if (this.UserInfo.userId) {
				// 获取歌单全部详情
				this.GetRecommendSongSheetAllInfo(option.id).then(value => {
					this.song_list = value.slice(0, 30)
				})
			}

			// 获取歌曲的高度
			uni.createSelectorQuery().in(this).select("#items").boundingClientRect(data => {
				this.items_top = data.top;
			}).exec();
		},
		computed: {
			...mapState('SongSheetInfo', ['RecommendSongSheetInfo', 'RecommendSongSheetList']),
			...mapGetters('SongSheetInfo', ['subscribedCount', 'commentCount', 'shareCount']),
			...mapState(['UserInfo'])
		},
		// 页面滚动时回调
		onPageScroll: function() {
			uni.createSelectorQuery().in(this).select("#items").boundingClientRect(data => {
				this.items_top = data.top;
			}).exec();
		},

		// 页面销毁
		onUnload() {
			// 清空歌单数据
			this.setRecommendSongSheetInfo({})
			this.setRecommendSongSheetList([])
		},
		onReachBottom() {
			let length = this.song_list.length
			if (length < this.RecommendSongSheetList.length) {
				let new_list = this.RecommendSongSheetList.slice(length, length + 30)
				let song_list = this.song_list
				song_list = song_list.concat(new_list)
				this.song_list = song_list
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.content {
		height: 100%;
	}

	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30%;
		position: relative;
		padding: 0 20rpx;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 250%;
			height: 100%;
			background-color: #271c1c;
			filter: blur(16rpx);
			z-index: -1;
			background-size: cover;
		}

		.top-icon {
			position: absolute;
			right: 20rpx;
			top: 10rpx;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-left: 30rpx;
			}
		}

		.top-body {
			display: flex;

			&>image {
				height: 200rpx;
				width: 200rpx;
				border-radius: 20rpx;
			}

			.top-right {
				width: 400rpx;
				margin-left: 20rpx;
				display: flex;
				flex-wrap: wrap;

				&>view {
					display: flex;
					align-items: center;
					width: 100%;

					image {
						height: 60rpx;
						width: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				text {
					color: #fbedeb;

					&:last-child {
						width: 100%;
						font-size: 22rpx;
						letter-spacing: 5rpx;
						display: block;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						height: 30rpx;
					}
				}
			}
		}
	}

	.centre {
		display: flex;
		justify-content: center;
		height: 80rpx;
		width: 70%;
		margin: 0 auto;
		background-color: #38373c;
		border-radius: 60rpx;
		position: relative;
		top: -40rpx;

		.centre-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30%;

			&:nth-child(1),
			&:nth-child(2) {
				border-right: 1rpx white solid;
			}


			image {
				height: 40rpx;
				width: 40rpx;
				margin-right: 10rpx;
			}

			text {
				color: white;
				font-size: 26rpx;
			}
		}
	}

	.body {
		padding: 0 20rpx;

		.body-top {
			display: flex;
			align-items: center;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-right: 20rpx;
			}

			#big-text {
				color: #fff;
			}

			#small-text {
				color: #939393;
				font-size: 20rpx;
			}

		}

		.body-fixed {
			position: fixed;
			top: 0rpx;
			background-color: black;
			width: 100%;
			height: 90rpx;
			margin: 0 -10rpx;
		}

		.body-items {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.body-item {
				display: flex;
				align-items: center;
				width: 100%;

				&>text {
					color: #fff;
					display: block;
					width: 8%;
					font-size: 26rpx;
				}
			}

			&>text {
				color: #fff;
				margin-top: 20rpx;
			}
		}
	}
</style>
